import { ref } from 'vue'

// 生成主题色的变量
const generateThemeColor = (color: string) => {
    const el = document.documentElement
    // 主色
    el.style.setProperty('--el-color-primary', color)
    
    // 生成不同深度的主题色
    for (let i = 1; i <= 9; i++) {
        el.style.setProperty(
            `--el-color-primary-light-${i}`,
            lighten(color, i * 0.07)
        )
    }
    // 生成深色主题色
    el.style.setProperty(
        '--el-color-primary-dark-2',
        darken(color, 0.1)
    )
}

// 颜色变浅
const lighten = (color: string, amount: number): string => {
    const rgb = hexToRgb(color)
    if (!rgb) return color
    
    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
    const lightness = Math.min(1, hsl[2] + amount)
    const [r, g, b] = hslToRgb(hsl[0], hsl[1], lightness)
    
    return rgbToHex(r, g, b)
}

// 颜色变深
const darken = (color: string, amount: number): string => {
    const rgb = hexToRgb(color)
    if (!rgb) return color
    
    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
    const lightness = Math.max(0, hsl[2] - amount)
    const [r, g, b] = hslToRgb(hsl[0], hsl[1], lightness)
    
    return rgbToHex(r, g, b)
}

// Hex转RGB
const hexToRgb = (hex: string) => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null
}

// RGB转HSL
const rgbToHsl = (r: number, g: number, b: number): [number, number, number] => {
    r /= 255
    g /= 255
    b /= 255
    
    const max = Math.max(r, g, b)
    const min = Math.min(r, g, b)
    let h = 0
    let s = 0
    const l = (max + min) / 2
    
    if (max !== min) {
        const d = max - min
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
        
        switch (max) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0)
                break
            case g:
                h = (b - r) / d + 2
                break
            case b:
                h = (r - g) / d + 4
                break
        }
        h /= 6
    }
    
    return [h, s, l]
}

// HSL转RGB
const hslToRgb = (h: number, s: number, l: number): [number, number, number] => {
    let r: number
    let g: number
    let b: number
    
    if (s === 0) {
        r = g = b = l
    } else {
        const hue2rgb = (p: number, q: number, t: number) => {
            if (t < 0) t += 1
            if (t > 1) t -= 1
            if (t < 1/6) return p + (q - p) * 6 * t
            if (t < 1/2) return q
            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6
            return p
        }
        
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s
        const p = 2 * l - q
        
        r = hue2rgb(p, q, h + 1/3)
        g = hue2rgb(p, q, h)
        b = hue2rgb(p, q, h - 1/3)
    }
    
    return [
        Math.round(r * 255),
        Math.round(g * 255),
        Math.round(b * 255)
    ]
}

// RGB转Hex
const rgbToHex = (r: number, g: number, b: number): string => {
    return '#' + [r, g, b].map(x => {
        const hex = x.toString(16)
        return hex.length === 1 ? '0' + hex : hex
    }).join('')
}

export const useTheme = () => {
    const initTheme = (color: string) => {
        generateThemeColor(color)
    }
    
    return {
        initTheme
    }
} 

